<!--
 * @Author: HaiF
 * @Date: 2020-12-14 14:22:57
 * @LastEditTime: 2021-02-09 16:04:12
 * @LastEditors: Please set LastEditors
 * @Description: 菜单 下所有btn按钮
 * @FilePath: \adminPC\src\views\menus\widget\childrenBtns.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <div>
    <JTable :table-list="tableData" :config="tableConfig">
      <template slot="Actions" slot-scope="{ row }">
        <el-button type="text" @click="handleActive(row,'edit')">编辑</el-button>
        <el-button type="text" @click="handleActive(row,'removeItem')">删除</el-button>
      </template>
    </JTable>
    <el-dialog :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" destroy-on-close :modal="false">
      <created :emit-data="selectedItem" @handleBoxEvent="handleDialog" />
    </el-dialog>
  </div>
</template>

<script>
import JTable from '@/components/JTable'
import { removeItem, updataItem, getChildren } from '@/api/menus'

import created from './created'

export default {
  components: { JTable, created },
  props: {
    emitId: {
      default: '',
      type: String
    }
  },
  data() {
    const dialog = {
      dialogVisible: false,
      active: '',
      title: { edit: '更新功能' }
    }

    const tableConfig = {
      thead: [
        // {
        //   type: 'selection'
        // },
        {
          type: 'index',
          label: '-',
          start: 1
        },
        {
          prop: 'functionName',
          label: '功能名称'
        },
        {
          prop: 'alias',
          label: '别名'
        },
        {
          prop: 'functionLevel',
          label: '功能级别'
        },
        {
          prop: 'code',
          label: 'code'
        },
        {
          prop: 'moudeSummary',
          label: '模块概述'
        },
        {
          prop: 'operateInstruction',
          label: '操作说明'
        },
        // {
        //   prop: 'isMenu',
        //   label: '是否菜单'
        // },
        {
          prop: 'remark',
          label: '说明'
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          prop: 'url',
          label: '地址'
        },
        {
          prop: '',
          label: 'Actions',
          type: 'actions',
          width: '100'
        }
      ]
    }

    return {
      dialog,
      tableConfig,
      selectedItem: {},
      tableData: []
    }
  },
  computed: {},
  watch: {
    emitId: {
      handler: function(newval) {
        if (newval) {
          this.getList()
        }
      },
      immediate: true
    }
  },
  created() { },
  mounted() { },
  methods: {
    getList() {
      const id = this.emitId
      console.log('菜单ID', id)
      // getChildrenBtn(id).then(res => {
      //   const { data, code } = res
      //   if (code === 200) {
      //     this.tableData = data
      //   }
      // })
      getChildren({ parentId_eq: id }).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.tableData = data
        }
      })
    },
    handleActive(target, type) {
      if (type === 'removeItem') {
        const { id } = target
        this.delItem(id)
      }
      if (type === 'edit') {
        this.selectedItem = target
        this.showDialog('edit')
      }
    },
    showDialog(target = 'created') {
      this.dialog.active = target
      this.dialog.dialogVisible = true
    },
    closeDialog() {
      this.dialog.active = ''
      this.dialog.dialogVisible = false
    },
    delItem(ids) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeItem(ids).then(res => {
          const { code, message } = res
          if (code === 200) {
            return this.$message.success(message)
          }
          this.$message.error(message)
        })
      })
    },
    handleDialog(emitObj) {
      const { target } = emitObj
      if (this.dialog.active === 'edit') {
        this.updataItem(target)
        return
      }
    },
    updataItem(item) {
      item = { ...this.selectedItem, ...item }
      updataItem(item).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message.success(message)
          this.closeDialog()
          this.getList()
          return
        }
        this.$message.error(message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
